<%@page import="java.sql.*"%>
<%@page import="java.util.*"%>
<%
/*String timer = request.getParameter("timer");
System.out.println(logout);
if(logout != null && logout.equals("Log out")){
	session.invalidate();
}*/
%>
<html>
<head>
<link rel="stylesheet" href="../style/stylesheet.css" type="text/css" >
<title>Correct Answer Indicators (Demo)</title>

<script type="text/javascript" >

function createXMLHttpRequest(){
  // See http://en.wikipedia.org/wiki/XMLHttpRequest
  // Provide the XMLHttpRequest class for IE 5.x-6.x:
  if( typeof XMLHttpRequest == "undefined" ) XMLHttpRequest = function() {
    try { return new ActiveXObject("Msxml2.XMLHTTP.6.0") } catch(e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP.3.0") } catch(e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP") } catch(e) {}
    try { return new ActiveXObject("Microsoft.XMLHTTP") } catch(e) {}
    throw new Error( "This browser does not support XMLHttpRequest." )
  };
  return new XMLHttpRequest();
}

var AJAX = createXMLHttpRequest();

function handler() {
	if(AJAX.readyState == 4 && AJAX.status == 200) {
		var json = eval('(' + AJAX.responseText +')');
		if(json.status != -1){
			if(json.status == 1){
				setTimeout('checkQuestionStatus()', 1000);
				document.getElementById("statustext").innerHTML = "Query made! Question is:"; 
				document.getElementById("statustext").innerHTML += " open! ";
			}else{
				console.log(json.status);
				document.getElementById("statustext").innerHTML = "Query made! Question is:";
				document.getElementById("statustext").innerHTML += " closed :( ";
				if(!(json.optionid == -1)){
					//each JSON object received will contain status, optionid and correct(true/false)
					console.log(json.optionid+"///");
					if(json.correct == 1 ){
						console.log("here3");
						var optionid = "option";
						optionid += Integer.parseInt(json.optionid);
						console.log(optionid);
						document.getElementById(optionid).style.display = "block";
					}
				}else{
					setTimeout('checkQuestionStatus()', 1000);
					console.log("or here"+json.optionid);
					if(json.optionid == -1){
						//setTimeout('checkQuestionStatus()', 1000);
					}else{
						var els = document.getElementsByClassName("option");
						for(var i=0; i < els.length; i++){
							var e = els[i].id;
							console.log(i);
							//call a getOptionIndicator(optionid), which will eventually call this handler
							getOptionIndicator(e, "11");
						}
					}
				}
			}
		}else {
			alert("SQL query not successful.");
		}
	}else if (AJAX.readyState == 4 && AJAX.status != 200) {
		alert("AJAX query was unsuccessful.");
	}
}

function pollQuestionState(){
	setTimeout('checkQuestionStatus()', 1000);
}

function setState(questionid){
	var params = "questionid="+questionid+"&setstate=1&optionid=-1";
	AJAX = createXMLHttpRequest();
	AJAX.onreadystatechange = handler;
	AJAX.open("POST", "setQuestionState.jsp");
	AJAX.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	AJAX.send(params);
}

function getIndicator(questionid){
	var params = "questionid="+questionid+"&setstate=0&optionid=-1";
	AJAX = createXMLHttpRequest();
	AJAX.onreadystatechange = handler;
	AJAX.open("POST", "setQuestionState.jsp");
	AJAX.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	AJAX.send(params);
}

function getOptionIndicator(optionid, questionid){
	var params = "questionid="+questionid+"&setstate=0&optionid="+optionid;
	AJAX = createXMLHttpRequest();
	AJAX.onreadystatechange = handler;
	AJAX.open("POST", "CAIServlet");
	AJAX.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	AJAX.send(params);
}

function toggleQuestionState(){
	var questionid = "11";
	setState(questionid);
}

function checkQuestionStatus(){
	var questionid = "11";
	getIndicator(questionid);
}

</script> 

<link rel="stylesheet" href="style/stylesheet.css" type="text/css"/>
</head>
<body onload="pollQuestionState()" style="font-family:sans-serif">

<div class="upperTitle">Correct Answer Indicator Demo</div>

<a id="Login" onClick="javascript:toggleQuestionState();"/>
			<div class="button" id="TimerDiv" style="height:50px">Toggle state
			</div><br/>
			<span id = "instruct">Click here to toggle question open state..</span><br/>
			<div id="statustext" >Request not made...</div>
	<form name="TimerForm" onSubmit="">
			<div style="float:left;width:300px;height:50px">
				<br />
			</div>
	</form>
	</a>
<br/>
<br/>
<form name="answerform"  >
<input type="radio" name="answer" value="1"/>5<span class="option" id="optionID1" style="display:none"><img src="images/tick.png"/></span><br/>
<input type="radio" name="answer" value="2"/>7<span class="option" id="optionID2" style="display:none"><img src="images/tick.png"/></span><br/>
<input type="radio" name="answer" value="3"/>8<span class="option" id="optionID3" style="display:none"><img src="images/tick.png"/></span><br/>
<input type="radio" name="answer" value="4"/>6<span class="option" id="optionID4" style="display:none"><img src="images/tick.png"/></span><br/>
<input type="radio" name="answer" value="5"/>4<span class="option" id="optionID5" style="display:none"><img src="images/tick.png"/></span><br/>
</form>
</body>
</html>